<template>
  <div id="home" name="slide-fade">
    <div class="top-home">
      <div class="top-left">
        <div class="el-row">
          <el-card shadow="always">
            <div class="icon">
              <el-icon style="vertical-align: middle;" :size="40" color="#40C9C6">
                <Grid />
              </el-icon>
              <div class="nono">
                <span>商品数量</span>
                <span>
                  <countTo :startVal='0' :endVal='goodsCount' :duration='3000'></countTo>
                </span>
              </div>
            </div>
          </el-card>
        </div>
        <div class="el-row">
          <el-card shadow="always">
            <div class="icon">
              <el-icon style="vertical-align: middle;" :size="40" color="#36A3F7">
                <ChatDotSquare />
              </el-icon>
              <div class="nono">
                <span>商品数量</span>
                <span>
                  <countTo :startVal='0' :endVal='waitStockCount' :duration='3000'></countTo>
                </span>
              </div>
            </div>
          </el-card>
        </div>
      </div>
      <div id="histogram" ref="order"></div>
    </div>
    <div class="middle">
      <el-row :gutter="20">
        <el-col :xs='24' :sm='24' :md='24' :lg='8'>
          <div id="middle-money" ref="money"></div>
        </el-col>
        <el-col :xs='24' :sm='24' :md='12' :lg='8'>
          <div id="middle-all" ref="area"></div>
        </el-col>
        <el-col :xs='24' :sm='24' :md='12' :lg='8'>
          <div id="middle-alls" ref="channel"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { ref } from 'vue'
import { ElMessage } from 'element-plus';
import { Grid, ChatDotSquare } from '@element-plus/icons-vue'
import { CountTo } from 'vue3-count-to'; //数字滚动插件
import { post } from '@/utils/request';

//商品数量
const goodsCount = ref(0)
//未发货单
const waitStockCount = ref(0)

/**
 * 获取首页聚合数据
 */
const handlerGetDashboardList = () => {
  let data = {
    _gp: 'admin.dashboard',
    _mt: 'integral'
  }
  post(data).then(res => {
    let { errno, errmsg } = res
    if (200 == errno) {
      goodsCount.value = res.data.goodsCount
      waitStockCount.value = res.data.waitStockCount
      let histogramDom = document.getElementById('histogram')!
      let lineDom = document.getElementById('middle-money')!
      let pieDom = document.getElementById('middle-all')!
      let piesDom = document.getElementById('middle-alls')!
      let order = echarts.init(histogramDom);
      let myChart2 = echarts.init(lineDom);
      let myChart3 = echarts.init(pieDom);
      let myChart4 = echarts.init(piesDom);
      /**
       * 柱形图
       */
      order.setOption({
        title: {
          text: '7日订单',
          subtext: '订单数',
          left: 30,
          subtextStyle: {
            color: '#b2b4b4'
          }
        },
        xAxis: {
          data: res.data.daysOrder[0]
        },
        yAxis: {},
        series: [
          {
            name: '订单数',
            type: 'bar',
            data: res.data.daysOrder[1],
            color: '#00a6ff',
            barWidth: 40,
          }
        ],
        tooltip: {},
        legend: {
          data: ['订单数'],
          right: 0
        },
      })
      /**
       * 折线图
       */
      myChart2.setOption({
        title: {
          text: '7日成交金额',
          subtext: '订单数'
        },
        xAxis: {
          data: res.data.daysSum[0]
        },
        yAxis: {},
        series: [
          {
            name: '订单数量',
            type: 'line',
            data: res.data.daysSum[1],
            color: '#5fc0c1',
          }
        ],
        tooltip: {},
        legend: [
          {
            data: ['订单数量'],
            right: 0
          }
        ]
      })
      /**
       * 订单地区分布饼图
       */
      myChart3.setOption({
        title: {
          text: '订单地区分布'
        },
        series: [
          {
            name: '地区分布',
            type: 'pie',
            data: res.data.area,
            width: 'auto',
            top: 60,
            radius: 70,

          }
        ],
        tooltip: {},
        legend: [
          {
            data: ['地区分布'],
            right: 0
          }
        ]
      })
      /**
       * 订单渠道分布饼图
       */
      myChart4.setOption({
        title: {
          text: '订单渠道分布'
        },
        series: [
          {
            type: 'pie',
            data: res.data.channel,
            width: 'auto',
            // height: 250,
            top: 60,
            radius: 70,

          }
        ],
        tooltip: {},
      })
    }
  })
}

setTimeout(() => {
  handlerGetDashboardList()
}, 200);

</script>

<style lang="less" scoped>
#home {
  margin: 0px;
  background-color: white;
  overflow: hidden;
}

.top-home {
  display: flex;
  padding: 0px 55px;
  margin-bottom: 0px !important;

  .top-left {
    width: 200px;
    height: 350px;

    .el-row {
      margin: 55px 0px;

      .el-card {
        width: 200px;
        display: inline-block;

        .icon {
          display: flex;
          align-content: space-around;
          justify-content: space-between;
          align-items: center;

          div {
            width: 70px;
            height: 40px;
            font-weight: bold;

            span .countTo:first-child {
              font-weight: normal;
              display: inline-block;
              font-size: 14px;
              margin-bottom: 3px;
              width: 100%;
            }
          }
        }
      }
    }
  }

  #histogram {
    width: 100%;
    height: 350px;
    margin-left: 50px;
  }
}

.middle {
  padding: 0px 50px;
  margin-bottom: 0px !important;
}



#middle-money {
  width: 100%;
  height: 350px;
}

#middle-all {
  width: 100%;
  height: 350px;
}

#middle-alls {
  width: 100%;
  height: 350px;
}

@media screen and (max-width: 992px) {

  //最大992 不能小于992
  .nono {
    display: none;
  }
  .icon{
    display: none;
  }

  .top-home .top-left .el-row .el-card {
    width: 80px;
  }
}

@media screen and (max-width: 500px) {

  //最大500 不能小于500
  #top-right {
    display: none;
  }
}

.slide-fade-enter-active {
  transition: all 0.2s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(-50px);
  opacity: 0;
}
</style>